import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

/* Froms */
/* 表单 */

// HTML表单元素
// 具有特定的表单行为, 通常自己维护state, 并根据用户输入进行更新
function Test(props) {
    return (<div>
        <form>
            <label>
                名字:
                <input type="text" name="name" />
            </label>
            <input type="submit" value="提交" />
        </form>
    </div>);
}
const test = <Test />;


// 受控组件(受setState控制的组件)
// React中, 表单元素可变状态通常保存在state属性中, 通过setState来更新
// 把html和React特性结合, 使state成为唯一数据源
// 渲染表单的React组件同时控制着用户输入过程中表单发生的操作
// 以这种方式控制取值的表单输入元素就叫做'受控组件'
// 受控组件是value和onchange一起使用的, 如果只设置一个, 或者把value的prop写死, 受控组件上指定的props会组织用户更改输入

// 表单标签
class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    // 当输入框改变时, state就发生变化
    handleChange(event) {
        // event.target返回生成该事件的元素, this是调用方法的对象, 二者不同
        // 这里的this是NameForm组件, event.target是input输入框
        console.log(this, event.target);
        this.setState({ value: event.target.value });
        // this.setState({value: this.value});
    }
    handleSubmit(event) {
        alert('提交的名字是: ' + this.state.value);
        event.preventDefault(); // 取消默认动作, 这里是跳转
    }

    render() {
        return (<div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    名字:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        </div>);
    }

}

// textarea标签
// HTML中textarea通过子元素定义文本, React中用value代替
class EssayForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '请撰写一篇关于你喜欢的 DOM 元素的文章.'
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value });
    }

    handleSubmit(event) {
        alert('提交的文章: ' + this.state.value);
        event.preventDefault();
    }

    // 实现点击清空效果
    handleClick(event) {
        this.setState({ value: '' });
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    文章:
                    <textarea value={this.state.value}
                        onChange={this.handleChange}
                        onClick={this.handleClick}
                    />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

// select标签(下拉列表)
class FlavorForm extends React.Component {
    constructor(props) {
        super(props);

        // React 并不会使用 selected 属性，而是在根 select 标签上使用 value 属性
        this.state = { value: 'coconut' };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value });
    }

    handleSubmit(event) {
        alert('你喜欢的风味是: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    选择你喜欢的风味:
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="grapefruit">葡萄柚</option>
                        <option value="lime">酸橙</option>
                        <option value="coconut">椰子</option>
                        <option value="mango">芒果</option>
                    </select>
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

// 处理多个输入
// 处理多个input元素时, 可以给每个元素添加name属性, 并让处理函数根据event.target.name的值选择要执行的操作
class Reservation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isGoing: true,
            numberOfGuests: 2
        }
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        // 根据target.name选择返回值的类型
        const value = target.name === 'isGoing' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            // target.name作为变量, 可以根据点击不同input更改相应的value
            // setState自动将部分state合并到当前state, 只需调用它更改部分state
            [name]: value
        });
    }

    render() {
        return (
            <form>
                <label>
                    参与:
                    <input
                        name="isGoing"
                        type="checkbox"
                        checked={this.state.isGoing}
                        onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                    来宾人数:
                    <input
                        name="numberOfGuests"
                        type="number"
                        value={this.state.numberOfGuests}
                        onChange={this.handleInputChange} />
                </label>
            </form>
        );
    }
}



ReactDOM.render(
    // test,
    // <NameForm />,
    // <EssayForm />,
    // <FlavorForm />,
    <Reservation />,
    document.getElementById('root')
);